<!-- @format -->

<template>
  <div class="home-ranking flex mb-4 m-t-2">
    <div class="store flex">
      <!-- <HomeTitle title="实时仓储排行Top10" /> -->
      <HomeTitle title="实时堆放量Top" />
      <div class="flex-1 flex">
        <StoreRanking :data="store" v-if="loading" />
      </div>
    </div>
    <div class="store flex">
      <!-- <HomeTitle title="累计提货排行Top10" /> -->
      <HomeTitle title="提货排行Top10" />
      <div class="flex-1">
        <StoreRanking :data="pick" v-if="loading" />
      </div>
    </div>
    <div class="store flex">
      <!-- <HomeTitle title="累计到货排行Top10" /> -->
      <HomeTitle title="到货排行Top10" />
      <div class="flex-1">
        <StoreRanking :data="arrival" v-if="loading" />
      </div>
    </div>
  </div>
</template>

<script setup>
import HomeTitle from "./components/home-title.vue";
import StoreRanking from "./components/store-ranking.vue";
import { getOperationalDataBytime } from "@/api/home/index.js";
import { onMounted, ref } from "vue";

let store = [],
  pick = [],
  arrival = [];

let loading = ref(false);

onMounted(() => {
  getOperationalDataBytime().then((res) => {
    res.data.forEach((item) => {
      store.push({
        ...item,
        value: item.cczl
      });
      pick.push({ ...item, value: item.thzl });
      arrival.push({ ...item, value: item.ybzl });
    });
    store.sort((a, b) => {
      return parseFloat(b.cczl) - parseFloat(a.cczl);
    });
    pick.sort((a, b) => {
      return parseFloat(b.thzl) - parseFloat(a.thzl);
    });
    arrival.sort((a, b) => {
      return parseFloat(b.ybzl) - parseFloat(a.ybzl);
    });
    if (store.length > 10) {
      store = store.slice(0, 10);
    }
    if (pick.length > 10) {
      pick = pick.slice(0, 10);
    }
    if (arrival.length > 10) {
      arrival = arrival.slice(0, 10);
    }
    loading.value = true;
  });
});
</script>

<style lang="less" scoped>
.home-ranking {
  border-radius: 9px;
  gap: 20px;
  height: 415px;

  > div {
    flex: 1 1 auto;
    width: 100%;
    flex-direction: column;
    background: #fff;
  }
}
</style>
